<template>
  <div>
    <div class="workplace-footer">
      <Slots>
        <template #default="slotProps">
          <div class="slot-content">
            <p class="slot-text">这是自定义的插槽内容</p>
            <ul>
              <li v-for="item in slotProps.list" :key="item">temp{{ item }}</li>
            </ul>
          </div>
        </template>
        <template v-slot:footer="slotProps">
          <div class="slot-footer">
            <p class="slot-text">这是自定义的插槽底部内容</p>
          </div>
        </template>
        <template #header>
          <div class="slot-header">
            <p class="slot-text">这是自定义的插槽头部内容</p>
          </div>
        </template>
      </Slots>
    </div>
  </div>
</template>

<script setup lang="ts">
import Slots from '@/views/vuejs/components/slots.vue'

</script>
